import pluginsImg from '@/assets/image/screenshot/plugins.png';

### 타입 정의#definition

```ts
export abstract class PageSpyPlugin {
  /**
   * 각 플러그인은 name을 지정해야 하며, 이는 현재 플러그인의 "식별자" 역할을 합니다.
   * PageSpy 내부의 플러그인 등록, 비활성화 기능은 모두 이 name 속성에 의존합니다
   */
  public abstract name: string;

  /**
   * 플러그인 로드 순서를 지정합니다. 플러그인 호출 순서는 다음과 같습니다:
   *   1. enforce: "pre" 속성을 가진 플러그인;
   *   2. enforce 속성이 없는 플러그인;
   *   3. enforce: "post" 속성을 가진 플러그인;
   */
  public abstract enforce?: PluginOrder;

  // new PageSpy() 호출 시 실행됩니다
  public abstract onInit: (params: OnInitParams) => any;

  // PageSpy 렌더링 완료 후 호출됩니다(렌더링 프로세스가 있는 경우)
  public abstract onMounted?: (params: OnMountedParams) => any;

  // 사용자가 PageSpy를 더 이상 필요로 하지 않을 때, 플러그인은 리셋/복구 기능을 가져야 합니다
  public abstract onReset?: () => any;
}

export interface OnInitParams {
  // 사용자가 전달한 인스턴스화 매개변수가 병합된 설정 정보
  config: Required<InitConfig>;

  // socket 인스턴스를 래핑한 것으로, 플러그인 개발자는 이 속성을 통해 디버그 측/API와 상호작용할 수 있습니다
  socketStore: SocketStoreType;
}

export interface OnMountedParams {
  // PageSpy가 렌더링하는 루트 노드
  root?: HTMLDivElement;

  // PageSpy가 렌더링하는 팝업의 루트 노드
  content?: HTMLDivElement;

  // socket 인스턴스를 래핑한 것으로, 플러그인 개발자는 이 속성을 통해 디버그 측/API와 상호작용할 수 있습니다
  socketStore: SocketStoreType;
}
```

### 동작 규약#convention

현재 플러그인이 플랫폼의 특정 동작 "데이터"를 수집(또는 공개하고자)하는 경우, `socketStore`로 데이터를 브로드캐스트하는 것 외에도, 플러그인이 `socketStore` 인스턴스에서 추가적인 `"public-data"` 내부 이벤트(Internal Event)를 발행하도록 규약으로 정하고 있습니다. 이는 통계나 데이터 영속화가 필요한 플러그인이 이 이벤트를 통해 통일된 방식으로 데이터를 수집할 수 있도록 하기 위함입니다. 플러그인이 특정 데이터를 "공개"하지 않아야 한다고 판단하는 경우에는 `"public-data"` 이벤트를 발행할 필요가 없습니다.

<a href={pluginsImg} target="_blank">
  <img src={pluginsImg} />
</a>

### 플러그인 구현 예제#demo

[DataHarborPlugin]({VITE_PLUGIN_DATA_HARBOR})과 [RRWebPlugin]({VITE_PLUGIN_RRWEB})을 참조하세요.

### 플러그인 사용 방법#usage

```html
<!-- SDK 불러오기 -->
<script src="https://<your-pagespy-host>/page-spy/index.min.js"></script>
<!-- 플러그인 불러오기 -->
<script src="https://<your-pagespy-host>/plugin/xxx/index.min.js"></script>

<!-- 플러그인 등록 -->
<script>
  PageSpy.registerPlugin(new XXXPlugin());
  window.$pageSpy = new PageSpy();
</script>
``` 